<template>
    <div class="app-container">
      <!-- 查询和其他操作 -->
        <el-form :inline="true" class="demo-form-inline filter">
          <el-form-item label="客户名称">
          <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable placeholder="请选择客户名称">
              <el-option
                v-for="item in fsiteNoBelongOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
        </el-form-item>
          <el-form-item class="elMonth" label="库存月份">
            <el-date-picker
              v-model="listQuery.fmonthTemp"
              type="month"
              placeholder="请选择库存月份"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-select
              v-model="listQuery.fstockno"
              class="filter-item"
              clearable
              placeholder="选择仓库名称"
            >
              <el-option
                v-for="item in fstocknoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="耗材名称">
            <el-input v-model="listQuery.fgoodname" placeholder="输入耗材名称"/>
          </el-form-item>
          <el-form-item>
            <el-button
              round
              class="filter-item"
             :style="{background:buttonColor.lookup,color:buttonColor.color}"
              @click="handleFilter"
              >查找</el-button
            >
            <!-- <el-button
              class="filter-item"
              type="success"
              icon="el-icon-bottom"
              @click="handleCreate"
              >导出</el-button
            > -->
          </el-form-item>
        </el-form>
  
      <!-- 查询结果 -->
      <el-table
       :height="buttonColor.clientHeight"
        v-loading="listLoading"
        :data="list"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        :header-cell-style="tableColor"
      >
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding"
          prop="foperator"
          :width="buttonColor.operationOne"
        >
          <template slot-scope="scope">
             <div class="operationButton">
              <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="detailDialog(scope.row)">
                <img src="../../../public/images/edit.png" />
                明细
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :width="buttonColor.line"
          :index="indexMethod"
          align="center"
          label="序号"
          type="index"
        />
         <el-table-column align="left" label="月份" prop="fmonth" />
        <el-table-column :width="buttonColor.name" :formatter="formatfoutpointNo2" align="left" label="仓库名称" prop="fstockname" />
        <el-table-column :width="buttonColor.billno" align="left" label="耗材编号" prop="fmaterialno" />
        <el-table-column align="left" :formatter="good" label="耗材名称" width="95" prop="fmaterialname" />
        <el-table-column align="left" :formatter="goodfspec" label="规格" prop="fspec" />
        <el-table-column align="left" :formatter="goodfordunit" label="单位" prop="funit" />
        <el-table-column align="center" label="期初" prop="fbegqty" />
        <el-table-column align="center" label="入库" prop="frecqty" />
        <el-table-column align="center" label="出库" prop="fretqty"/>
        <el-table-column align="center" label="调拨" prop="fmovqty" />
        <el-table-column align="center" label="领出" prop="foutqty" />
        <el-table-column align="center" label="退回" prop="finqty" />
        <el-table-column align="center" label="损溢" prop="fmrkqty" />
        <el-table-column align="center" label="期末" prop="fbalqty" />
        <el-table-column align="center" label="库存" prop="repertory" />
      </el-table>
  <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  
      <!-- 详细数据 -->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="detailVisible"
        width="60%"
      >
      <template slot="title">
          <div :style="titleColor">详细信息</div>
        </template>
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="库存月份">
            <el-input
              disabled
              v-model="detailQueryList.fmonth"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无库存月份"
            />
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-input
              disabled
              v-model="detailQueryList.fstockname"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无仓库名称"
            />
          </el-form-item>
          <el-form-item label="耗材编号">
            <el-input
              disabled
              v-model="detailQueryList.fmaterialno"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无耗材编号"
            />
          </el-form-item>
          <el-form-item label="耗材名称">
            <el-input
              disabled
              v-model="detailQueryList.fmaterialname"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无耗材名称"
            />
          </el-form-item>
          <el-form-item label="耗材规格">
            <el-input
              disabled
              v-model="detailQueryList.fspec"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无耗材规格"
            />
          </el-form-item>
          <el-form-item label="耗材单位">
            <el-input
              disabled
              v-model="detailQueryList.funit"
              clearable
              class="filter-item"
              style="width: 150px"
              placeholder="暂无耗材单位"
            />
          </el-form-item>
        </el-form>
  
        <!-- 查询结果 -->
        <el-table
          v-loading="dialogLoading"
          :data="dialogList"
          :header-cell-style="tableColor"
          stripe
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          height="400"
        >
          <el-table-column
          :index="indexMethodDetail"
          align="center"
          label="序"
          type="index" prop="time" />
          <el-table-column align="center" label="业务类型" prop="fbizname" />
          <el-table-column width="160" align="center" label="单据编号" prop="fbizno" />
          <el-table-column align="center" label="业务日期" prop="fbizdate" />
          <el-table-column align="center" label="数量(+)" prop="f1" />
          <el-table-column align="center" label="数量(-)" prop="f2" />
          <el-table-column align="center" label="备注" prop="fmemo" />
        </el-table>
      </el-dialog>
  
      <material :materialIdVisible.sync="materialIdVisible" :fsiteNo.sync="materialFsiteNo" :tableColor="tableColor" @materialDialog="materialDialogValue" />
    </div>
  </template>
  
  <style>
  .button-margin {
    margin: 2px 0px;
  }
  .el-button + .el-button {
    margin-left: 1px;
  }
  
  </style>
  <script>
  import { getListArea, fsiteOptionsByLevel } from "@/api/area";
  import {
    listgoodInv,
    listDetail
  } from "@/api/haocai/goodInv";
   import {listgoodInfolist} from '@/api/haocai/goodInfo'
  import {tableColor, titleColor, buttonColor } from "@/filters/index";
  import Pagination from "@/components/Pagination";
  import Material from '@/components/Material'
  import moment from "moment";
  export default {
    name: "ITcGoodInv",
    components: { Pagination,Material},
    data() {
      return {
        fsiteNoBelongOptions: [], // 客户列表
        dialogList: [],
        dialogLoading: false,
        detailVisible: false,
        detailQueryList: {
          fmonth: undefined,
          fstockno: undefined,
          fstockname: undefined,
          fmaterialno: undefined,
          fmaterialname: undefined,
          fordunit: undefined,
          fspec: undefined,
        },
        list: null,
        haocailist:[],
        fstocknoOptions: [],
        total: 0,
        materialIdVisible: false,
        materialFsiteNo: null,
        tableColor,
        buttonColor,
        titleColor,
        listQuery: {
          page: 1,
          limit: 20,
          fsiteNo: this.$store.state.user.fsiteNo,
          fstockno: undefined,
          fstockname: undefined,
          fmaterialno: undefined,
          fmaterialname: undefined,
          fspec: undefined,
          funit: undefined,
          fbegqty: undefined,
          frecqty: undefined,
          fretqty: undefined,
          fmovqty: undefined,
          foutqty: undefined,
          finqty: undefined,
          fmrkqty: undefined,
          fbalqty: undefined,
          fupddate: undefined,
          fmonth: undefined,
          fmonthTemp: new Date(),
          sort: "create_time",
          order: "desc",
        },
        dataForm: {
          fstockno: undefined,
          fstockname: undefined,
          fmaterialno: undefined,
          fmaterialname: undefined,
          fspec: undefined,
          funit: undefined,
          fbegqty: undefined,
          frecqty: undefined,
          fretqty: undefined,
          fmovqty: undefined,
          foutqty: undefined,
          finqty: undefined,
          fmonth:undefined,
          fmrkqty: undefined,
          fbalqty: undefined,
        },
        dataForm1: {
          fstockno: undefined,
          fstockname: undefined,
          fmaterialno: undefined,
          fmaterialname: undefined,
          fspec: undefined,
          funit: undefined,
          fbegqty: undefined,
          frecqty: undefined,
          fretqty: undefined,
          fmovqty: undefined,
          foutqty: undefined,
          finqty: undefined,
          fmonth:undefined,
          fmrkqty: undefined,
          fbalqty: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "创建",
        },
        rules: {
          fstockno: [{ required: true, message: "仓库名称不能为空" }],
          fmaterialno: [{ required: true, message: "耗材编号不能为空" }],
          fmonth: [{ required: true, message: "请选择日期" }],
        },
      };
    },
    created() {
      this.getList();
      // 客户列表
      fsiteOptionsByLevel(3)
        .then(response => {
          this.fsiteNoBelongOptions = response.data.data.list
        })
        .catch(() => {
          this.fsiteNoBelongOptions = []
        })
      // 仓库名称
      getListArea({ flag: 30, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.fstocknoOptions = response.data.data.list;
        })
        .catch(() => {
          this.fstocknoOptions = [];
        });
       //耗材资料
        listgoodInfolist({limit: 20,fsiteNo:this.$store.state.user.fsiteNo})
        .then((res)=>{
          this.haocailist=res.data.data.list
        })  
    },
    methods: {
      // 调入仓库名称
      formatfoutpointNo2: function(row, column) {
        if (this.fstocknoOptions.length > 0) {
          for (let i = 0; i < this.fstocknoOptions.length; i++) {
            if (row.fstockno == this.fstocknoOptions[i].value) {
              return this.fstocknoOptions[i].label
            }
          }
          return ''
        } else {
          return ''
        }
      },
      // 耗材
      good: function(row, column) {
        if (this.haocailist.length > 0) {
          for (let i = 0; i < this.haocailist.length; i++) {
            console.log(row.fmaterialno,this.haocailist[i].fmaterialno)
            if (row.fmaterialno === this.haocailist[i].fmaterialno) {
              return this.haocailist[i].fmaterialname
            }
          }
          return ''
        } else {
          return ''
        }
      },
      goodfspec: function(row) {
        if (this.haocailist.length > 0) {
          for (let i = 0; i < this.haocailist.length; i++) {
            if (row.fmaterialno === this.haocailist[i].fmaterialno) {
              return this.haocailist[i].fspec+'/'+this.haocailist[i].fordunit
            }
          }
          return ''
        } else {
          return ''
        }
      },
      goodfordunit: function(row) {
        if (this.haocailist.length > 0) {
          for (let i = 0; i < this.haocailist.length; i++) {
            console.log(row.fmaterialno,this.haocailist[i].fmaterialno)
            if (row.fmaterialno === this.haocailist[i].fmaterialno) {
              return this.haocailist[i].fordunit
            }
          }
          return ''
        } else {
          return ''
        }
      },
      datetimeFormat(row, column) {
        const date = row[column.property];
        if (date === undefined || date === null) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      //获取列表
      getList() {
        this.listLoading = true;
        this.listQuery.fmonth = moment(this.listQuery.fmonthTemp).format("YYYYMM")
        if(this.listQuery.fmonth == 'Invalid date'){
          this.listQuery.fmonth = ''
        }
        listgoodInv(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list;
            this.total = response.data.data.total;
            this.listLoading = false;
            this.listQuery.fupddate=undefined
           for(var i = 0 ; i < this.list.length ; i++)
           {
             this.list[i]['fmonth'] = this.list[i]['fmonth'].substr(0,4)+'-'+this.list[i]['fmonth'].substr(4,5)
           }
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      },
      //查找
      handleFilter() {
        this.listQuery.page = 1;
        if(this.listQuery.fmonth == undefined)
        {
           this.listQuery.fmonth = new Date
        }
        this.getList();
      },
  
      resetForm() {
        this.dataForm = {
          fstockno: undefined,
          fstockname: undefined,
          fmaterialno: undefined,
          fmaterialname: undefined,
          fspec: undefined,
          funit: undefined,
          fbegqty: undefined,
          frecqty: undefined,
          fretqty: undefined,
          fmovqty: undefined,
          foutqty: undefined,
          finqty: undefined,
          fmrkqty: undefined,
          fbalqty: undefined,
          details: [],
        };
      },
      handleCreate() {
        // this.resetForm();
        // this.dialogStatus = "create";
        // this.dialogFormVisible = true;
        // this.$nextTick(() => {
        //   this.$refs["dataForm"].clearValidate();
        // });
         this.$confirm('功能开发中', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      },
      // 获取详细数据
      detailDialog(row) {
         this.dialogLoading = true;
        const temp = {
          fmonth: row.fmonth,
          fstockno:row.fstockno,
          fmaterialno:row.fmaterialno,
          fsiteNo: this.$store.state.user.fsiteNo,
        }
        listDetail(temp)
        .then((response) => {
          this.dialogList = response.data.data.list;
          this.dialogLoading = false;
        })
        .catch(() => {
          this.dialogList = [];
          this.dialogLoading = false;
        });
  
        this.dialogLoading = true;
        this.detailQueryList.fmonth = row.fmonth
        this.detailQueryList.fstockno = row.fstockno
        this.detailQueryList.fstockname = row.fstockname
        this.detailQueryList.fmaterialno = row.fmaterialno
        this.detailQueryList.fmaterialname = row.fmaterialname
        this.detailQueryList.funit = row.funit
        this.detailQueryList.fspec = row.fspec
        this.detailVisible = true;
      },
  
        // 耗材弹出框
      searchDialogMaterial() {
        this.materialIdVisible = true
        this.materialFsiteNo = this.dataForm.fsiteNo
      },
  
       // 耗材弹出框
      materialDialogValue(value){
          this.dataForm1.fmaterialno = value.data.fmaterialno
          this.dataForm1.fmaterialname = value.data.fmaterialname
          this.dataForm1.fbuyprice = value.data.fbuyprice
          this.fbuypriceData = value.data.fbuyprice
          this.dataForm1.fspec = value.data.fspec
          this.dataForm1.funit = value.data.funit
          this.dataForm1.funit = value.data.funit
      },
  
      //取消弹框
      cancel() {
        this.dialogFormVisible = false;
        this.dataForm = {
          fstockname: undefined,
          fstockno: undefined,
          fmaterialno: undefined,
          fbegqty: undefined,
          frecqty: undefined,
          fretqty: undefined,
          fmovqty: undefined,
          foutqty: undefined,
          finqty: undefined,
          fbillno: undefined,
          fuseqty: undefined,
          fmrkqty: undefined,
          fbalqty: undefined,
          id: undefined,
        };
      },
      indexMethod(index) {
        index = index + 1;
        return index;
      },
      indexMethodDetail(index) {
        index = index + 1;
        return index;
      },
    },
  };
  </script>
  
  